<template>
	<div class="f-select-image" :style="{height: cssStyle.height}">
		<div v-if="count > 1" class="f-select-image-all" :style="{width: cssStyle.width, height: cssStyle.height}">
			<vuedraggable v-model="viewModel" class="f-select-image-all">
				<div v-for="(item,index) in viewModel" :key="index" class="f-select-image-list">
					<div v-if="item !== ''" class="f-select-image-choice">
						<img :src="$ala.urlImage(item)" class="img" @click="selectImage(index)" />
						<div class="Mongolia" @click="deleteTab(index)">
							<i class="el-icon-delete"></i>
						</div>
					</div>
					<div v-else class="select-upload" :style="{width: cssStyle.width, height: cssStyle.height}" @click="selectImage(index)">
            <el-icon style="font-size: 24px;color: #999;"><Plus /></el-icon>
					</div>
				</div>
			</vuedraggable>
		</div>
		<div v-else :style="{width: cssStyle.width, height: cssStyle.height}">
			<div v-if="viewModel" class="f-select-image-choice" :style="{width: cssStyle.width, height: cssStyle.height}">
				<img :src="$ala.urlImage(viewModel)" class="img" @click="selectImage()" />
				<div class="Mongolia" @click="deleteTab()">
					<i class="el-icon-delete"></i>
				</div>
			</div>
			<div v-else class="select-upload" :style="{width: cssStyle.width, height: cssStyle.heihgt}" @click="selectImage()">
				<el-icon style="font-size: 24px;color: #999;"><Plus /></el-icon>
			</div>
		</div>
		<el-dialog v-el-drag-dialog v-model="dialogVisible" top="8vh" :before-close="handleClose" append-to-body>
			<zk-file-manage ref="fileManage" @autoDialogClose="handleClose" @selectFileChildEvent="selectFileChildEvent"></zk-file-manage>
		</el-dialog>
	</div>
</template>


<script>
	import vuedraggable from 'vuedraggable'
	export default {
		components: {
			vuedraggable
		},
		model: {
			event: 'change',
			prop: 'dataModel'
		},
		data() {
			return {
				dialogVisible: false,
				selectIndex: 0, // 当前选择的图片索引
				viewModel: null // 监听视图 如果count=1上传一张图片，返回string.如果大于1，多张图片, 返回list
			}
		},
		props: {
			count: {
				default: 1 // 默认图片数量1。如果count=1上传一张图片，返回string.如果大于1，多张图片,返回list
			},
			type: {},
			dataModel: {},
			cssStyle: {
				default: () => {
					return {
						width: '100px',
						height: '100px'
					}
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				if (this.dataModel) {
					if (this.dataModel instanceof Array) {
						var vData = []
						for (var i = 0; i < this.count; i++) {
							if (this.dataModel[i]) {
								vData.push(this.dataModel[i])
							} else {
								vData.push('')
							}
						}
						this.viewModel = vData
					} else {
						this.viewModel = this.dataModel
					}
				} else {
					if (this.count > 1) {
						this.viewModel = []
						for (let i = 0; i < this.count; i++) {
							this.viewModel.push('')
						}
					} else {
						this.viewModel = ''
					}
				}
			},
			handleClose() {
				this.dialogVisible = false
			},
			// 监听图片管理的选择事件
			selectFileChildEvent(image) {
				if (this.count > 1) {
					this.viewModel.splice(this.selectIndex, 1, image)
				} else {
					this.viewModel = image
				}
				this.$emit('selectImage', image)
				this.handleClose()
			},
			selectImage(index) {
				this.selectIndex = index
				this.dialogVisible = true
			},
			deleteTab(dIndex) {
				if (dIndex === undefined) {
					this.viewModel = ''
				} else {
					this.selectIndex = dIndex
					this.viewModel.splice(this.selectIndex, 1)
				}
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					var list = this.viewModel
					if (this.count > 1) {
						list = this.viewModel.filter(r => r !== '')
					}
					this.$emit('change', list)
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import "./var.scss";
</style>